<template>
  <div class="home-container">
    <!-- 首页轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in homeInfo"
                      :key="index">
        <img v-lazy="item.imgs[0]"
             :aid="item._id" />
      </van-swipe-item>
    </van-swipe>
    <!-- 功能模块 -->
    <van-grid :column-num="3"
              clickable>
      <van-grid-item to="/home/newsList">
        <van-image src="http://ty:3000/public/images/menu/menu1.png" />
        <span>新闻资讯</span>
      </van-grid-item>
      <van-grid-item to="/home/pictureList">
        <van-image src="http://ty:3000/public/images/menu/menu2.png" />
        <span>网络图片</span>
      </van-grid-item>
      <van-grid-item to="/home/goodsList">
        <van-image src="http://ty:3000/public/images/menu/menu3.png" />
        <span>商品购买</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="http://ty:3000/public/images/menu/menu4.png" />
        <span>留言反馈</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="http://ty:3000/public/images/menu/menu5.png" />
        <span>视频专区</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="http://ty:3000/public/images/menu/menu6.png" />
        <span>联系我们</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      homeInfo: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化请求页面数据
    initData() {
      this.axios.get('/goods/homeInit').then(res => {
        if (res.data.code == 0) {
          Toast(res.data.msg)
        } else if (res.data.code == 1) {
          this.homeInfo = res.data.homeInfo
        }
      })
    }
  }
}
</script>

<style lang="scss">
.home-container {
  .van-swipe {
    height: 7rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-grid-item__content--center {
    padding: 0.3rem 0.6rem;
    img {
      width: 2.13rem;
      height: 2.13rem;
    }
    span {
      padding-top: 0.25rem;
      font-size: 0.35rem;
    }
  }
}
</style>